<template>
  <div class="ui_details">
    <van-nav-bar title="充值">
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
    </van-nav-bar>
    
    <div class="bank" @click="goToControlCards">
      <div class="bank_div_lf">
      <i class="iconfont  icon-yinhang"></i>
      <div>
        <div>中国银行</div>
        <div>尾号8888储蓄卡</div>
      </div>  
      </div>
      <div class="bank_div_rf"><i class="iconfont  icon-unie61f"></i></div>
    </div>
   
    <div class="money">
      <div class="money_one">充值金额</div>
      <span class="money_two">¥ </span>
      <input type="text" name="text" value="188" onkeyup="value=value.replace(/[^\d]/g,'')">

      <!-- <div class="money_three">可用余额88888元</div> -->
    </div>
    <!-- <div class="massage">
      请绑定账户本人的银行卡,目前仅支持绑定一张
    </div> -->
    <van-button class="success_buttom" :block="true" @click="show=true">确定充值</van-button>
    <van-popup v-model="show" position="bottom">
      <span class="password">请输入支付密码</span> <i class="iconfont icon-guanbi" @click="show=false"></i>
      <van-password-input
        :value="value"
        @focus="showKeyboard = true"
      />
      <div class="forget_password">
        忘记密码
      </div>
      <!-- 数字键盘 -->
      <van-number-keyboard
        :show="showKeyboard"
        @input="onInput"
        @delete="onDelete"
        @blur="showKeyboard = false"
        :hide-on-click-outside='false'
      />
    </van-popup>
  </div>
</template>
<script>
  export default {
    name: 'recharge',
    data() {
      return {
        show: false,
        value: '123365',
        showKeyboard: true,
        if_have: '',
      };
    },
    watch: {
      value(val, oldVal) {
        console.log(val, oldVal);
      }
    },
    methods: {
      onInput(key) {
        this.value = (this.value + key).slice(0, 6);
      },
      onDelete() {
        this.value = this.value.slice(0, this.value.length - 1);
      },
      goToControlCards() {
        if (true) {
          this.$router.push({ name: 'controlcards', params: { from: 'withdrawDeposit' } });
        } else {
          this.$router.push('/cards');
        }
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="less" scoped>
  .ui_details {
    .van-popup {
      height: 60%;
      width: 100%;
      .icon-guanbi {
        font-size: 32px;
        position: relative;
        left: 74%;
        color: #ccc;
      }
      .password {
        position: relative;
        margin-top: 30px;
        display: inline-block;
        margin-bottom: 50px;
        width: 265px;
        //    border: 1px solid #f00; 
        height: 50px;
        font-size: 36px;
        left: 50%;
        margin-left: -140px;
      }
      .forget_password {
        position: absolute;
        top: 270px;
        color: blue;
        left: 83%;
      }
    }
    .bank {
      // border:1px solid #f00;
      height: 200px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:0 30px;
      margin:30px 0px;
      .bank_div_rf{
        width:30%;
        text-align: right;
        
      }
      .bank_div_lf {
        margin-right:10px;
        display:flex;
        align-items: center;
        .icon-yinhang{
          font-size:80px;
          color:red;
          margin-right:10px;
        }
      }
      .font_two {
        margin-left: 330px;
        color: #999999;
        font-size: 40px;
      }
    }
    .money {
      height: 190px;
      width: 750px;

      background-color: #fff;
      .money_one {
        //   padding-top: 30px;
        height: 70px;
        line-height: 70px;
        margin-left: 30px;
        font-size: 28px;
        width: 720px;
        color: #5c5c5c;
      }
      .money_two {
        height: 110px;
        margin-left: 30px;
        font-size: 80px;
        width: 720px;
      }
      input {
        font-size: 70px;
        width: 620px;
        text-align: left;
        text-decoration: none;
        -web-kit-appearance: none;
        -moz-appearance: none;
        border: none;
        outline: none;
        //   border: 1px solid #f00;
      }

      .money_three {
        margin-left: 30px;
        width: 720px;
        height: 35px;
        line-height: 70px;
        font-size: 28px;
        color: #999999;
        border-top: 1px solid #e1e1e1;
      }
    }
    .massage {
      width: 720px;
      height: 30px;
      margin-left: 30px;
      //    border:1px solid  #000;
      margin-top: 10px;
      color: #999999;
    }
    .success_buttom {
      background-color: #f7a427;
      margin: 30px auto;
      text-align: center;
      width: 700px;
      height: 90px;
      color: #fff;
      font-size: 36px;
      border-radius: 45px;
    }
  }
</style>

